<script setup lang="ts"></script>

<template>
    <div class="jet-button">
        <button class="jetbrains-button jetbrains-cool-button">按钮</button>
    </div>
</template>

<style scoped lang="scss">
.jet-button {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;

    .jetbrains-button {
        width: 220px;
        height: 34px;
        line-height: 34px;
        border-radius: 3px;
        outline: none;
        border: none;
    }

    .jetbrains-cool-button {
        background-color: #3e0d90;
        border: 1px solid #3e0d90;
        text-align: center;
        cursor: pointer;
        border-radius: 4px;
        background-image: linear-gradient(
            91deg,
            #3d0d8f 24.89%,
            #4e24c3 41.03%,
            #6542ff 55.67%,
            #ac42ff 76.24%,
            #f74792 85.67%,
            #fec723 102.51%
        );
        background-repeat: no-repeat;
        background-size: 400%;
        background-position-x: 0;
        transition: background-position 2s ease-out 0.2s;
        color: white;

        &:hover {
            background-position-x: 100%;
            transition: background-position 0.1s ease-in;
        }
    }
}
</style>
